<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com//assets/owlcarousel/assets/owl.carousel.min.css">
	<link rel="stylesheet" href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
	<link rel="stylesheet" href="animate.css">
	<script src="http://www.owlcarousel.owlgraphic.com//assets/vendors/jquery.min.js"></script>
	<script src="http://www.owlcarousel.owlgraphic.com//assets/owlcarousel/owl.carousel.js"></script>
	<style>
		.owl-carousel .item
		{
			height: 10rem;
			background: #4DC7A0;
			padding: 1rem;
		}
	</style>
</head>
<body>
<!--  Demos -->
<section id="demos">
	<div class="row">
		<div class="owl-carousel">
			<div class="item"><h4>1</h4></div>
			<div class="item"><h4>2</h4></div>
			<div class="item"><h4>3</h4></div>
			<div class="item"><h4>4</h4></div>
			<div class="item"><h4>5</h4></div>
			<div class="item"><h4>6</h4></div>
		</div>
		<div class="actions">
			<button id="left-add" class="btn btn-default">left add</button>
			<button id="next" class="btn btn-default">next</button>
			<button id="replace" class="btn btn-default">replace</button>
			<button id="remove" class="btn btn-default">remove all</button>
			<button id="right-add" class="btn btn-default">right add</button>
		</div>

		<script>
			$(document).ready(function ()
			{
				var owl = $('.owl-carousel');
//				owl.owlCarousel({
//					margin: 10,
//					nav: false,
//					dots: false,
//					items: 4
//				});
				owl.owlCarousel({
					animateOut: 'slideOutDown',
					animateIn: 'flipInX',
					items: 4,
					margin: 30,
					stagePadding: 30,
					smartSpeed: 450
				});

				$('#next').on('click', function ()
				{
					owl.trigger('next.owl.carousel', [500]);
				});

				$('#replace').on('click', function ()
				{
					var html = '<div class="item"><h4>R1</h4></div>';

					//TODO: Needed wraped by class:owl-item, the argument content is different in Owl Carousel 2,
					// it must be jquery object;
					// https://github.com/smashingboxes/OwlCarousel2/issues/496
					// https://github.com/smashingboxes/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1289
					// https://github.com/OwlFonk/OwlCarousel/blob/master/owl-carousel/owl.carousel.js#L1410
					// https://github.com/smashingboxes/OwlCarousel2/issues/339
					var content = '<div class="owl-item">' + html + '</div>';
					owl.trigger('replace.owl.carousel', [$(content), 0])
							.trigger('refresh.owl.carousel');
				});

				$('#left-add').on('click', function ()
				{
					var html = '<div class="item"><h4>N1</h4></div>';

					//TODO: Needed wraped by class:owl-item, the argument content is different in Owl Carousel 2,
					// it must be jquery object;
					// https://github.com/smashingboxes/OwlCarousel2/issues/496
					// https://github.com/smashingboxes/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1289
					// https://github.com/OwlFonk/OwlCarousel/blob/master/owl-carousel/owl.carousel.js#L1410
					var content = '<div class="owl-item">' + html + '</div>';
					owl.trigger('add.owl.carousel', [$(content), 0])
							.trigger('refresh.owl.carousel').trigger('to.owl.carousel', [0, 100]);
				});
				$('#right-add').on('click', function ()
				{
					var html = '<div class="item"><h4>N1</h4></div>';

					//TODO: Needed wraped by class:owl-item, the argument content is different in Owl Carousel 2,
					// it must be jquery object;
					// https://github.com/smashingboxes/OwlCarousel2/issues/496
					// https://github.com/smashingboxes/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1289
					// https://github.com/OwlFonk/OwlCarousel/blob/master/owl-carousel/owl.carousel.js#L1410
					var content = '<div class="owl-item">' + html + '</div>';
					var itemsCount = owl.data('owl-carousel').items().length;
//					alert(itemsCount);
					owl.trigger('add.owl.carousel', [$(content)])
							.trigger('refresh.owl.carousel').trigger('to.owl.carousel', [itemsCount, 100]);
				});

				$('#remove').on('click', function ()
				{
					owl.trigger('remove.owl.carousel', 2)
							.trigger('refresh.owl.carousel');
				});
			});
		</script>
	</div>
</section>

</body>
</html>